<template>
<view>
    <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
        <swiper-item v-for="(item,index) in swiperList" :key="index">
            <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
            <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
        </swiper-item>
    </swiper>
</view>
</template>

<script>
export default {
    name:'SwiPer',
    data() {
        return {
            cardCur: 0,
            swiperList: [{
                id: 0,
                type: 'image',
                url: 'https://www.ahlinghui.com/Uploads/image/20160217/20160217091811_68540.png'
            }, {
                id: 1,
                type: 'image',
                url: 'https://www.ahlinghui.com/Uploads/image/20170104/20170104042836_13375.jpg',
            }, {
                id: 2,
                type: 'image',
                url: 'https://www.ahlinghui.com/Uploads/image/20170105/20190402172435.jpg'
            }, {
                id: 3,
                type: 'image',
                url: 'https://www.ahlinghui.com/Uploads/image/20160726/20160726133555_55788.jpg'
            }, {
                id: 4,
                type: 'image',
                url: 'https://www.ahlinghui.com/Uploads/image/20170105/20170105105000_87651.jpg'
            }],
            dotStyle: false,
            towerStart: 0,
            direction: ''
        };
    },
    onLoad() {
        this.TowerSwiper('swiperList');
        // 初始化towerSwiper 传已有的数组名即可
    },
    methods: {
        DotStyle(e) {
            this.dotStyle = e.detail.value
        },
        // cardSwiper
        cardSwiper(e) {
            this.cardCur = e.detail.current
        },
        // towerSwiper
        // 初始化towerSwiper
        TowerSwiper(name) {
            let list = this[name];
            for (let i = 0; i < list.length; i++) {
                list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
                list[i].mLeft = i - parseInt(list.length / 2)
            }
            this.swiperList = list
        },

        // towerSwiper触摸开始
        TowerStart(e) {
            this.towerStart = e.touches[0].pageX
        },

        // towerSwiper计算方向
        TowerMove(e) {
            this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
        },

        // towerSwiper计算滚动
        TowerEnd(e) {
            let direction = this.direction;
            let list = this.swiperList;
            if (direction == 'right') {
                let mLeft = list[0].mLeft;
                let zIndex = list[0].zIndex;
                for (let i = 1; i < this.swiperList.length; i++) {
                    this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
                    this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
                }
                this.swiperList[list.length - 1].mLeft = mLeft;
                this.swiperList[list.length - 1].zIndex = zIndex;
            } else {
                let mLeft = list[list.length - 1].mLeft;
                let zIndex = list[list.length - 1].zIndex;
                for (let i = this.swiperList.length - 1; i > 0; i--) {
                    this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
                    this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
                }
                this.swiperList[0].mLeft = mLeft;
                this.swiperList[0].zIndex = zIndex;
            }
            this.direction = ""
            this.swiperList = this.swiperList
        },
    }
}
</script>

<style>
.tower-swiper .tower-item {
    transform: scale(calc(0.5 + var(--index) / 10));
    margin-left: calc(var(--left) * 100upx - 150upx);
    z-index: var(--index);
}
</style>
